<template>
  <div>
    <!-- {{ dataList }} -->
    <div
      id="content"
      style="height: 400px;color:#fff;"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";

export default {
  // 将分页查询的数据前十项显示到折线图中
  // x轴显示省份，y轴显示确诊人数
  mounted() {
    this.initEcharts();
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  data() {
    return {
      loading:true,
      id: 0,
    };
  },
  //组件销毁
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    this.id = setInterval(() => {
      this.findData();
    }, 5000);
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    initEcharts(res1, res2) {
      // 销毁图标
      echarts.init(document.getElementById("content")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("content"));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: res1,
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: res2,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    findData() {
      this.page_query({ page: 1, pageSize: 10 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.dead;
        });
        this.initEcharts(res1, res2);
      });
    },
  },
};
</script>